<script setup>
    import {ref} from 'vue'
    const name = ref('')
    const message = ref('')
    let checked = ref(false)
    let checkedNames = ref([])
</script>

<template>
    <main>
        <div>
            <p>name is {{ name }}</p>
            <input type="text" v-model="name">
        </div>

        <div>
            <span>Multiline message is:</span>
            <p style="white-space: pre-line;">{{ message }}</p>
            <textarea v-model="message" placeholder="add multiple lines"></textarea>
        </div>

        <div>
            <input type="checkbox" id="checkbox" v-model="checked" />
            <label for="checkbox">{{ checked }}</label>
        </div>

        <div>
            <p> 多个复选框</p>
            <div>Checked names: {{ checkedNames }}</div>

            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>

            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>

            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
        </div>
    </main>
</template>